<template>
	<z-paging ref="paging" v-model="recordsData" @query="queryList" show-refresher-update-time>
		<template #top>
			<view class="content" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
				<view class="title">
					<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
					<text>{{title}}</text>
				</view>
			</view>
		</template>
		
		<!-- 空数据列表 -->
		<template #empty :empty-view-style="{'background':'#fff'}">
			<view class="w-100 d-flex d-flex-column d-flex-middle">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png" style="width: 80%;"></image>
				<text class="font-bold font30 d-flex-btn">{{'您暂时还没有浏览记录~'}}~</text>
			</view>
		</template>
		
		<view class="main animated fadeIn faster">
			<view class="d-flex d-flex-middle d-flex-between px-3">
				<view class="d-flex-column w-100">
					<view class="d-flex d-flex-middle w-100" v-for="i in recordsData" :key="i.id" @click="handClick(i)">
						<image :src="i.transmissionContent.actionCode=='blog_audit_fail'? 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/AuditFailed.png' : i.transmissionContent.avatar" class="rounded mr-2" style="width: 75rpx; height: 75rpx;"></image>
						<view class="d-flex-column d-flex-item py-2" style="border-bottom: 1px solid #ededed;">
							<view class="font30 mb">{{i.transmissionContent.actionCode=='blog_audit_fail'? '审核失败' : i.transmissionContent.actionCode=='couple_recommend'? '搭子推荐' : i.transmissionContent.nickname}}</view>
							<view class="d-flex d-flex-middle ">
								<view class="font26 mr-1">{{i.transmissionContent.actionCode=='user_concern'? '关注了你' : i.transmissionContent.actionCode=='user_visit'? '访问过你的主页' : i.transmissionContent.actionCode=='user_favor'? '赞了你的博客' : i.transmissionContent.actionCode=='blog_audit_fail'? '您的博客审核未通过' : i.transmissionContent.actionCode=='blog_comment'? '评论了你的动态' : i.transmissionContent.actionCode=='blog_collect'? '收藏了你的动态' : i.transmissionContent.actionCode=='operation_report'? '您的举报已提交成功' : '系统为您推荐了搭子'}}</view>
								<view class="font22 color71" style="margin-top: 1px;">{{i.gmtCreated}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { otherApi } from '../../http/other';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '系统通知',
				recordsData: []
			}
		},
		components: {TitleBarVue},
		onLoad() {
			uni.setStorageSync('notice', false);
			store.commit('setNotice', false);
			this.GetMesNotice()
		},
		methods: {
			async queryList(pageNo, pageSize){
				let params = {
					messageType: 1,
					pageIndex: pageNo,
					pageSize: 20
				}
				let res = await otherApi.GetMesNotice(params)
				res.records.forEach(i => {
					i.transmissionContent = JSON.parse(i.transmissionContent)
				})
				uni.hideLoading()
				this.$refs.paging.complete(res.records);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			handClick(item) {
				let code = item.transmissionContent.actionCode
				if(code == 'couple_recommend' || code == 'user_visit' || code == 'user_concern') {
					uni.navigateTo({
						url: `/pagesMain/HomePage/HomePage?id=${item.transmissionContent.uid}`
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	min-height: 100vh;
	overflow: hidden;
}
.content {
	width: 100%;
	background-color: #fff !important;
}
.content .title {
	display: flex;
	align-items: center;
	height: 80rpx;
	padding-right: 47rpx;
	border-bottom: 1px solid rgba(204, 204, 204, .2);
}
.content .title text {
	flex: 1;
	font-size: 32rpx;
	text-align: center;
	font-weight: normal;
}
</style>
